<template>
  <div class="search-container">
    <!-- 背景贴图 -->
    <div class="backImg">
      <img src="@/assets/searchBackg.png" alt="" />
    </div>
    <!-- 头部搜索栏 -->
    <div class="header">
      <van-icon name="arrow-left" color="#fff" size="25px" @click="$router.back()" />
      <van-search
        class="search-input"
        v-model="value"
        show-action
        :placeholder="place"
        background="transparent"
        maxlength="15"
        clearable
        @search="onSearch"
        @clear="onClear"
        @input="onInput"
      >
        <template #action v-if="isShowList">
          <div @click="onSearch(value)" class="search-text">搜索</div>
        </template>
        <template #action v-else>
          <van-icon
            class="shop-card"
            name="cart-o"
            size="30px"
            :badge="badge"
            @click="$router.push({ name: 'Cart' })"
          />
        </template>
      </van-search>
    </div>
    <!-- 历史搜索记录 -->
    <div v-if="isShowList">
      <search-record @search="onSearch" :list="recordList"></search-record>
    </div>
    <!-- 搜索商品列表 -->
    <div class="search-list" v-else>
      <div class="list-content" v-if="searchList.length">
        <goods-card
          v-for="item in searchList"
          :key="item.id"
          :data="item"
          :num="numList[item.id] || 0"
        ></goods-card>
      </div>
      <div class="not-data" v-else>未找到相关的宝贝</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SearchRecord from "@/components/SearchRecord.vue";
import GoodsCard from "@/components/GoodsCard.vue";
import api from "@/api";
export default {
  components: { SearchRecord, GoodsCard },
  mounted() {
    const list = JSON.parse(localStorage.getItem("record"));
    if (list) {
      this.recordList = [...list];
    } else {
      this.recordList = [];
    }
  },
  data() {
    return {
      place: "衬衫",
      isShowList: true,
      value: "",
      recordList: [],
      searchList: [],
    };
  },
  computed: {
    ...mapState(["numList"]),
    badge() {
      const count = Object.values(this.numList).reduce((prev, cur) => prev + cur, 0);
      if (count > 99) {
        return "99+";
      }
      return count;
    },
  },
  methods: {
    //点击搜索获取搜索列表
    async onSearch(val) {
      if (!val) {
        this.value = this.place;
      } else {
        this.value = val;
      }
      this.$store.commit("setLoading", true);
      const res = await api.searchGoods(this.value);
      this.searchList = res;
      this.isShowList = false;
      //搜索历史处理
      if (!this.recordList.includes(this.value)) {
        this.recordList.push(this.value);
        localStorage.setItem("record", JSON.stringify(this.recordList));
      }
    },
    //清空输入框
    onClear() {
      this.value = "";
      this.isShowList = true;
    },
    //手动清空输入框
    onInput(val) {
      if (val === "") {
        this.isShowList = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/SearchView.scss";
</style>
